SVG Animation এবং Interactivity

এসভিজি (Scalable Vector Graphics) ফাইলগুলি শুধুমাত্র স্ট্যাটিক গ্রাফিক্স প্রদর্শন করে না, বরং সেগুলির মধ্যে অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি যোগ করাও সম্ভব। এসভিজি এর এই ক্ষমতা ওয়েব ডেভেলপারদের জন্য অত্যন্ত কার্যকরী, কারণ এটি গ্রাফিক্স এবং উপাদানগুলির মধ্যে ডায়নামিক পরিবর্তন এবং ইউজার ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।

এসভিজি অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি সাধারণত CSS এবং JavaScript ব্যবহার করে তৈরি করা হয়। এতে বিভিন্ন প্রপার্টি যেমন রঙ পরিবর্তন, আকার পরিবর্তন, অবস্থান পরিবর্তন ইত্যাদি অ্যানিমেট করা যায়। এসভিজি অ্যানিমেশন ওয়েবসাইটের ইউজার ইন্টারফেসে প্রাণ সঞ্চারিত করতে সহায়ক হয়।

1. এসভিজি অ্যানিমেশন CSS ব্যবহার করে

এসভিজি ফাইলের মধ্যে CSS ব্যবহার করে অ্যানিমেশন করা খুবই সহজ। CSS এর @keyframes রুল এবং ট্রানজিশন প্রোপার্টি ব্যবহার করে এসভিজি উপাদানগুলিতে অ্যানিমেশন যোগ করা যায়।

উদাহরণ: একটি বৃত্তের রঙ পরিবর্তন

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <style>
    .circle {
      animation: changeColor 2s infinite;
    }

    @keyframes changeColor {
      0% {
        fill: red;
      }
      50% {
        fill: green;
      }
      100% {
        fill: blue;
      }
    }
  </style>
  <circle cx="100" cy="100" r="50" class="circle" />
</svg>

এখানে:

• .circle ক্লাসের মাধ্যমে CSS অ্যানিমেশন যোগ করা হয়েছে।
• @keyframes ব্যবহার করে বৃত্তের রঙ পরিবর্তন করা হচ্ছে, যা 2 সেকেন্ডে একাধিক রঙ পরিবর্তন করবে এবং চিরকাল চলতে থাকবে।

2. JavaScript ব্যবহার করে এসভিজি অ্যানিমেশন

JavaScript ব্যবহার করে এসভিজি উপাদানগুলির উপর আরো জটিল অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি যোগ করা সম্ভব। JavaScript ব্যবহার করলে ডায়নামিকভাবে পজিশন, আকার, রঙ বা অন্য যেকোনো প্রপার্টি পরিবর্তন করা যায়।

উদাহরণ: একটি বৃত্তের আকার পরিবর্তন

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
  <script>
    var circle = document.getElementById('myCircle');
    setInterval(function() {
      var currentRadius = parseInt(circle.getAttribute('r'));
      circle.setAttribute('r', currentRadius === 50 ? 100 : 50);
    }, 1000);
  </script>
</svg>

এখানে:

• JavaScript ব্যবহার করে প্রতি এক সেকেন্ডে বৃত্তের আকার পরিবর্তন করা হচ্ছে।

3. ইন্টারঅ্যাকটিভিটি (CSS এবং JavaScript)

এসভিজি ফাইলের মধ্যে ইন্টারঅ্যাকটিভিটি যোগ করা অত্যন্ত সহজ। ইউজার যখন কোনো উপাদানে হোভার বা ক্লিক করে, তখন আপনি CSS বা JavaScript এর মাধ্যমে তার আচরণ পরিবর্তন করতে পারেন।

উদাহরণ: হোভার করলে বৃত্তের আকার পরিবর্তন

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
  <style>
    #myCircle:hover {
      r: 75;
    }
  </style>
</svg>

এখানে:

• বৃত্তে হোভার করলে তার আকার ৫০ পিক্সেল থেকে ৭৫ পিক্সেলে পরিবর্তিত হবে।

4. SVG সহ JavaScript এর মাধ্যমে ক্লিক ইভেন্ট

JavaScript দিয়ে আপনি এসভিজি উপাদানে ক্লিক ইভেন্টও যোগ করতে পারেন। এর মাধ্যমে ইউজারের ইনপুট বা ক্লিকের উপর ভিত্তি করে অ্যানিমেশন বা পরিবর্তন ঘটানো যায়।

উদাহরণ: ক্লিক করলে বৃত্তের রঙ পরিবর্তন

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
  <script>
    document.getElementById('myCircle').addEventListener('click', function() {
      this.setAttribute('fill', 'green');
    });
  </script>
</svg>

এখানে:

• বৃত্তে ক্লিক করলে তার রঙ পরিবর্তিত হবে।

5. SVG এ অ্যানিমেশন ট্রানজিশন (Transition)

CSS ব্যবহার করে এসভিজি উপাদানে ট্রানজিশনও যোগ করা যেতে পারে। এর মাধ্যমে আপনি এক উপাদান থেকে অন্য উপাদানে মসৃণভাবে পরিবর্তন ঘটাতে পারেন।

উদাহরণ: বৃত্তের রঙ পরিবর্তন করতে ট্রানজিশন ব্যবহার

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <style>
    circle {
      transition: fill 0.5s ease;
    }
    circle:hover {
      fill: red;
    }
  </style>
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

এখানে:

• transition প্রপার্টির মাধ্যমে বৃত্তের রঙ পরিবর্তন সুনির্দিষ্ট সময়ে (০.৫ সেকেন্ডে) মসৃণভাবে হবে।

সারাংশ

এসভিজি অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি ওয়েব ডিজাইনে অনেক শক্তিশালী বৈশিষ্ট্য যোগ করতে সক্ষম। CSS এবং JavaScript এর মাধ্যমে আপনি এসভিজি উপাদানগুলিতে অ্যানিমেশন ও ইন্টারঅ্যাকটিভ আচরণ যোগ করতে পারেন, যা ওয়েব পেজে আরও প্রাণবন্ত এবং ইউজার-ফ্রেন্ডলি ইন্টারফেস তৈরি করতে সাহায্য করে।

এসভিজি (SVG) গ্রাফিক্সের একটি শক্তিশালী সুবিধা হলো এটি অ্যানিমেট করা সম্ভব। এসভিজি অ্যানিমেশন ওয়েব ডিজাইন এবং ডেভেলপমেন্টে অত্যন্ত জনপ্রিয় হয়ে উঠেছে, কারণ এটি গ্রাফিক্সকে ডায়নামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। এসভিজি অ্যানিমেশন মূলত CSS এবং JavaScript এর মাধ্যমে তৈরি করা হয়, তবে এসভিজি এর নিজস্ব <animate>, <animateTransform>, এবং <set> ট্যাগও অ্যানিমেশন তৈরি করতে ব্যবহৃত হতে পারে।

SVG অ্যানিমেশন তৈরি করার পদ্ধতি

এসভিজি অ্যানিমেশন তৈরি করার প্রধান পদ্ধতি দুটি: CSS অ্যানিমেশন এবং এসভিজি ট্যাগ ব্যবহার করে অ্যানিমেশন। নিচে প্রতিটির মৌলিক ধারণা দেওয়া হল।

1. CSS দিয়ে SVG অ্যানিমেশন

এসভিজি চিত্রের উপর CSS স্টাইলিং এবং অ্যানিমেশন যোগ করতে পারবেন। CSS অ্যানিমেশন এসভিজি গ্রাফিক্সের বিভিন্ন উপাদান যেমন রঙ, আকার, অবস্থান ইত্যাদি পরিবর্তন করতে ব্যবহার করা হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

ব্যাখ্যা:

• attributeName: আপনি যেই বৈশিষ্ট্যটি অ্যানিমেট করতে চান, যেমন cx (বৃত্তের অনুভূমিক অবস্থান), cy, r ইত্যাদি।
• from: অ্যানিমেশনের শুরু অবস্থান।
• to: অ্যানিমেশনের শেষ অবস্থান।
• dur: অ্যানিমেশনের দৈর্ঘ্য বা সময়।
• repeatCount: অ্যানিমেশনের পুনরাবৃত্তি সংখ্যা, এখানে indefinite মানে একে একাধিক বার চলতে থাকবে।

এখানে, বৃত্তটি অনুভূমিকভাবে স্থানান্তরিত হবে এবং এটি অবিরত চলতে থাকবে।

2. SVG ট্যাগ ব্যবহার করে অ্যানিমেশন

এসভিজি-তে আপনি কিছু বিশেষ ট্যাগ ব্যবহার করে সরাসরি অ্যানিমেশন করতে পারেন। এর মধ্যে <animate>, <animateTransform>, এবং <set> ট্যাগ ব্যবহার করা হয়।

<animate> ট্যাগ

এই ট্যাগটি এসভিজি উপাদানের গুণগত পরিবর্তন করতে ব্যবহৃত হয়। আপনি এর মাধ্যমে একটি নির্দিষ্ট অ্যাট্রিবিউট (যেমন fill, stroke, cx, cy ইত্যাদি) অ্যানিমেট করতে পারেন।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="fill" values="blue;red;green;blue" dur="4s" repeatCount="indefinite" />
  </circle>
</svg>

ব্যাখ্যা:

• attributeName="fill": আপনি যেই গুণটি অ্যানিমেট করতে চান (এখানে fill যা রঙ নির্দেশ করে)।
• values="blue;red;green;blue": একাধিক রঙ নির্ধারণ করা হয়, এবং অ্যানিমেশন চলাকালে রঙটি একের পর এক পরিবর্তিত হবে।
• dur="4s": অ্যানিমেশনের দৈর্ঘ্য ৪ সেকেন্ড।
• repeatCount="indefinite": অ্যানিমেশনটি অবিরত চলতে থাকবে।

<animateTransform> ট্যাগ

এই ট্যাগটি কোনো এসভিজি উপাদানের রূপান্তর (যেমন রোটেশন, স্কেলিং, ট্রান্সলেশন) অ্যানিমেট করতে ব্যবহৃত হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="40" fill="blue">
    <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite" />
  </circle>
</svg>

ব্যাখ্যা:

• type="rotate": রোটেশন অ্যানিমেশন করা হচ্ছে।
• from="0 100 100": রোটেশন শুরু হবে 0 ডিগ্রি থেকে, এবং ঘূর্ণন কেন্দ্রবিন্দু হবে (100, 100)।
• to="360 100 100": রোটেশন শেষ হবে 360 ডিগ্রিতে।
• dur="4s": অ্যানিমেশন চলার সময় ৪ সেকেন্ড।
• repeatCount="indefinite": অ্যানিমেশনটি পুনরাবৃত্তি হবে।

<set> ট্যাগ

এটি একটি নির্দিষ্ট অ্যাট্রিবিউটের মান পরিবর্তন করতে ব্যবহৃত হয়, যা স্থায়ীভাবে পরিবর্তন হয়। এটি সাধারণত একবার এক্সিকিউট হয় এবং কোনো পুনরাবৃত্তি নেই।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <set attributeName="fill" to="green" begin="1s" dur="2s" />
  </circle>
</svg>

ব্যাখ্যা:

• attributeName="fill": রঙ পরিবর্তন করা হবে।
• to="green": রঙটি সবুজ হয়ে যাবে।
• begin="1s": ১ সেকেন্ড পরে অ্যানিমেশন শুরু হবে।
• dur="2s": অ্যানিমেশনটির সময়কাল ২ সেকেন্ড।

সারাংশ

এসভিজি অ্যানিমেশন ওয়েব ডেভেলপমেন্টে একটি শক্তিশালী এবং কার্যকরী টুল। আপনি CSS, JavaScript, এবং এসভিজি ট্যাগগুলির মাধ্যমে বিভিন্ন ধরনের অ্যানিমেশন তৈরি করতে পারেন, যা ওয়েব পেজে গ্রাফিক্সের জন্য ইন্টারঅ্যাকটিভ এবং ডায়নামিক এলিমেন্ট যোগ করতে সহায়ক। <animate>, <animateTransform>, এবং <set> ট্যাগের মাধ্যমে সরাসরি এসভিজি উপাদানগুলির অ্যানিমেশন করা সম্ভব, যা ওয়েবসাইটের ভিজ্যুয়াল প্রেজেন্টেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য উপভোগ্য করে তোলে।

এসভিজি (SVG) ফরম্যাটে গ্রাফিক্স তৈরি করার পাশাপাশি, আপনি CSS (Cascading Style Sheets) এবং SMIL (Synchronized Multimedia Integration Language) ব্যবহার করে অ্যানিমেশনও তৈরি করতে পারেন। এই দুইটি পদ্ধতি দিয়ে আপনি এসভিজি গ্রাফিক্সের মধ্যে ডায়নামিক মুভমেন্ট এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন যোগ করতে পারবেন।

CSS দিয়ে SVG অ্যানিমেশন তৈরি করা

CSS ব্যবহার করে এসভিজি গ্রাফিক্সের মধ্যে অ্যানিমেশন তৈরি করা সহজ এবং বেশ জনপ্রিয়। CSS-এর @keyframes রুল এবং অন্যান্য প্রপার্টি ব্যবহার করে আপনি অ্যানিমেশন পরিচালনা করতে পারেন।

CSS অ্যানিমেশন এর মাধ্যমে অ্যানিমেটেড সিলেক্টেড এলিমেন্ট

@keyframes: এটি CSS অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এখানে আপনি চিত্রের অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করতে পারেন।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <style>
      @keyframes moveCircle {
        0% {
          cx: 50;
          cy: 50;
        }
        50% {
          cx: 150;
          cy: 50;
        }
        100% {
          cx: 50;
          cy: 50;
        }
      }
      circle {
        animation: moveCircle 2s infinite;
      }
    </style>
  </circle>
</svg>

ব্যাখ্যা:

• @keyframes moveCircle: এটি সিলেক্টেড এলিমেন্টের অ্যানিমেশন তৈরি করে। এখানে, cx এবং cy এর মান পরিবর্তন করা হয়, যার ফলে বৃত্তটি অনুভূমিকভাবে চলে।
• animation: moveCircle 2s infinite: এটি অ্যানিমেশনটি 2 সেকেন্ডে একবার সম্পন্ন হবে এবং এটি পুনরাবৃত্তি হবে।

CSS মাধ্যমে রঙ পরিবর্তন অ্যানিমেশন

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="blue">
    <style>
      @keyframes changeColor {
        0% {
          fill: blue;
        }
        50% {
          fill: green;
        }
        100% {
          fill: blue;
        }
      }
      rect {
        animation: changeColor 3s infinite;
      }
    </style>
  </rect>
</svg>

ব্যাখ্যা:

• এখানে, fill এর মাধ্যমে রঙ পরিবর্তন করা হয়েছে। অ্যানিমেশনটি বৃত্তের রঙকে নীল থেকে সবুজ এবং আবার নীল করবে।

SMIL (Synchronized Multimedia Integration Language) দিয়ে SVG অ্যানিমেশন

SMIL একটি XML ভাষা, যা মিডিয়া কন্টেন্টের সিঙ্ক্রোনাইজেশন এবং অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। SMIL ব্যবহার করে এসভিজি উপাদানের অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করা যায়। যদিও SMIL বেশ কিছু ব্রাউজারে সমর্থন হারিয়েছে, তবুও এটি কিছু ক্ষেত্রে ব্যবহৃত হতে পারে।

SMIL অ্যানিমেশন

<animate>: এটি এসভিজি অ্যানিমেশনের জন্য একটি জনপ্রিয় SMIL ট্যাগ। এর মাধ্যমে আপনি এসভিজি উপাদানগুলির বৈশিষ্ট্য যেমন অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করতে পারেন।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

ব্যাখ্যা:

• <animate> ট্যাগের মধ্যে attributeName="cx" দ্বারা আপনি cx অ্যাট্রিবিউটটি অ্যানিমেট করতে বলেছেন। from এবং to দ্বারা স্টার্ট এবং এন্ড পজিশন নির্ধারণ করা হয়েছে।
• dur="2s": অ্যানিমেশনটি 2 সেকেন্ডে সম্পন্ন হবে।
• repeatCount="indefinite": এটি অ্যানিমেশনটি বারবার পুনরাবৃত্তি হবে এমনটি নির্দেশ করে।

SMIL দিয়ে রঙ পরিবর্তন অ্যানিমেশন

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="blue">
    <animate attributeName="fill" from="blue" to="green" dur="3s" repeatCount="indefinite" />
  </rect>
</svg>

ব্যাখ্যা:

• এখানে, fill অ্যাট্রিবিউটটি অ্যানিমেট করা হয়েছে। from="blue" এবং to="green" এর মাধ্যমে রঙ পরিবর্তন করা হয়।

CSS এবং SMIL এর মধ্যে পার্থক্য

• CSS: এটি স্টাইলিংয়ের জন্য ব্যবহৃত হলেও, আপনি @keyframes ব্যবহার করে এসভিজি উপাদানগুলির মধ্যে অ্যানিমেশন যোগ করতে পারেন। এটি অধিক ব্রাউজারে সমর্থিত এবং আধুনিক ওয়েব ডেভেলপমেন্টের জন্য জনপ্রিয়।
• SMIL: এটি XML ভিত্তিক এবং মূলত এসভিজি গ্রাফিক্সের জন্য অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। তবে এটি কিছু ব্রাউজারে সমর্থিত নয় এবং এর ব্যবহার কমে যাচ্ছে।

সারাংশ

এসভিজি অ্যানিমেশন তৈরি করতে CSS এবং SMIL দুটোই কার্যকরী উপায়। CSS ব্যবহার করে আপনি সহজেই স্টাইল এবং অ্যানিমেশন তৈরি করতে পারেন, যা ব্রাউজারের মধ্যে ব্যাপকভাবে সমর্থিত। SMIL আরও শক্তিশালী অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়, তবে এর ব্যবহার আধুনিক ওয়েব ব্রাউজারে কিছুটা সীমাবদ্ধ। এসভিজি অ্যানিমেশন ওয়েব পেজকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।

এসভিজি (SVG) তে hover effects এবং click events ব্যবহার করে আপনি গ্রাফিক্সের ইন্টারঅ্যাকটিভিটি বাড়াতে পারেন। এই ইফেক্টগুলি CSS এবং JavaScript এর মাধ্যমে এসভিজি উপাদানগুলিতে অ্যাপ্লাই করা যেতে পারে, যা আপনার ওয়েব পেজকে আরও আকর্ষণীয় এবং ইউজার-ফ্রেন্ডলি করে তোলে। এসভিজি গ্রাফিক্সের উপর হোভার ইফেক্ট বা ক্লিক ইভেন্টের মাধ্যমে বিভিন্ন ধরনের এনিমেশন বা পরিবর্তন আনা সম্ভব।

১. Hover Effects with CSS

Hover Effects হল ইউজার যখন কোন উপাদানে মাউস হোভার করে তখন সে উপাদানটির পরিবর্তন হয়। CSS এর মাধ্যমে এসভিজি উপাদানে হোভার ইফেক্ট দেওয়া যায়। এখানে :hover পসুডোক্লাস ব্যবহার করা হয়।

উদাহরণ: Hover Effect with Fill Change

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" class="hover-effect" />
</svg>

<style>
  .hover-effect:hover {
    fill: red; /* Hovering on the circle will change its color to red */
  }
</style>

এখানে, যখন ইউজার বৃত্তটির উপর মাউস হোভার করবে, তখন বৃত্তের রঙ নীল থেকে লাল পরিবর্তিত হবে।

উদাহরণ: Hover Effect with Stroke Change

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" class="hover-effect" />
</svg>

<style>
  .hover-effect:hover {
    stroke: green; /* Hovering on the rectangle will change the stroke color to green */
    stroke-width: 10; /* It will also make the stroke width thicker */
  }
</style>

এখানে, ইউজার যখন আয়তক্ষেত্রটির উপর মাউস হোভার করবে, স্ট্রোকের রঙ কালো থেকে সবুজ হয়ে যাবে এবং স্ট্রোকের প্রস্থও বাড়ানো হবে।

২. Click Events with JavaScript

Click Events হল এমন ইভেন্ট যা তখন ঘটে যখন ইউজার কোন এসভিজি উপাদান বা এলিমেন্টে ক্লিক করে। এসভিজি উপাদানের সাথে JavaScript ব্যবহার করে আপনি click event তৈরি করতে পারেন, যা বিভিন্ন ধরনের পরিবর্তন বা অ্যানিমেশন trigger করতে পারে।

উদাহরণ: Click Event with JavaScript

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" id="myCircle" />
</svg>

<script>
  document.getElementById("myCircle").addEventListener("click", function() {
    this.setAttribute("fill", "green"); // When clicked, the circle's color changes to green
  });
</script>

এখানে, বৃত্তটিতে ক্লিক করার পর, বৃত্তটির রঙ নীল থেকে সবুজ হয়ে যাবে। addEventListener মেথডটি ব্যবহার করা হয়েছে যা ক্লিক ইভেন্টে প্রতিক্রিয়া জানাবে।

উদাহরণ: Click Event with Animation

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="orange" id="myRectangle" />
</svg>

<script>
  document.getElementById("myRectangle").addEventListener("click", function() {
    this.setAttribute("width", "150"); // Clicking will expand the width of the rectangle
    this.setAttribute("height", "150"); // Clicking will also expand the height of the rectangle
  });
</script>

এখানে, আয়তক্ষেত্রটিতে ক্লিক করার পর এর প্রস্থ এবং উচ্চতা বৃদ্ধি পাবে।

৩. CSS Transition for Smooth Hover Effects

হোভার ইফেক্টে CSS Transition ব্যবহার করলে ইফেক্টটি আরো মসৃণভাবে ঘটে। transition প্রপার্টি ব্যবহার করে রঙ, প্রস্থ, এবং অন্যান্য স্টাইলের পরিবর্তনগুলো সুন্দরভাবে প্রদর্শিত হয়।

উদাহরণ: Smooth Hover Effect with Transition

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" class="hover-effect" />
</svg>

<style>
  .hover-effect {
    transition: fill 0.3s ease, transform 0.3s ease; /* Apply smooth transition for color and transformation */
  }
  
  .hover-effect:hover {
    fill: red; /* Change color to red on hover */
    transform: scale(1.2); /* Increase size slightly on hover */
  }
</style>

এখানে, বৃত্তটির রঙ পরিবর্তন এবং আকারের বৃদ্ধি খুবই মসৃণভাবে হবে, কারণ transition ব্যবহার করা হয়েছে।

৪. Combining Hover and Click Events

আপনি hover এবং click ইভেন্ট একসাথে ব্যবহার করে আরো জটিল ইন্টারঅ্যাকশন তৈরি করতে পারেন। যেমন, হোভার করলে কোনো একটি পরিবর্তন হবে, এবং ক্লিক করলে অন্য কোনো পরিবর্তন ঘটবে।

উদাহরণ: Hover and Click Event Combination

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" class="hover-effect" id="myCircle" />
</svg>

<style>
  .hover-effect {
    transition: fill 0.3s ease;
  }

  .hover-effect:hover {
    fill: red; /* Hover effect to change color */
  }
</style>

<script>
  document.getElementById("myCircle").addEventListener("click", function() {
    this.setAttribute("fill", "green"); // Clicking changes the color to green
  });
</script>

এখানে, ইউজার প্রথমে বৃত্তটির উপর মাউস হোভার করলে রঙ লাল হয়ে যাবে, এবং পরে ক্লিক করলে রঙ সবুজ হয়ে যাবে।

সারাংশ

এসভিজি (SVG) তে hover effects এবং click events ব্যবহার করে আপনি গ্রাফিক্সের সাথে ইন্টারঅ্যাকটিভিটি যুক্ত করতে পারেন, যা ওয়েব পেজের ইউজার এক্সপিরিয়েন্স (UX) উন্নত করে। CSS এর মাধ্যমে হোভার ইফেক্ট এবং JavaScript এর মাধ্যমে ক্লিক ইভেন্ট সহজেই অ্যাড করা যায়, এবং এর মাধ্যমে আপনি অ্যানিমেশন, রঙ পরিবর্তন, আকার পরিবর্তন ইত্যাদি কার্যকলাপ তৈরি করতে পারবেন।

এসভিজি (SVG) ফরম্যাটে ফিল্টার এবং এফেক্টস ব্যবহার করার মাধ্যমে গ্রাফিক্সের দৃশ্যমানতা ও স্টাইলকে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করা যায়। এসভিজি ফিল্টারগুলি মূলত চিত্রের উপর বিভিন্ন ধরণের ভিজ্যুয়াল ইফেক্ট প্রয়োগ করতে ব্যবহৃত হয়, যেমন ব্লার, শ্যাডো, গ্রেডিয়েন্ট, উজ্জ্বলতা এবং কনট্রাস্ট পরিবর্তন ইত্যাদি। এই ফিল্টারগুলি এসভিজি উপাদানের মধ্যে একত্রিত করা যায় এবং CSS বা JavaScript দ্বারা কন্ট্রোল করা যেতে পারে।

1. এসভিজি ফিল্টার (SVG Filters)

এসভিজি ফিল্টারগুলোর মাধ্যমে আপনি গ্রাফিক্স বা চিত্রের উপাদানগুলির উপর বিভিন্ন প্রভাব (effects) প্রয়োগ করতে পারেন। এসভিজি ফিল্টারগুলি সাধারণত <filter> ট্যাগের মাধ্যমে ব্যবহার করা হয়, যার মধ্যে বিভিন্ন ফিল্টারের প্রকার থাকতে পারে। এই ফিল্টারগুলিকে <fe> এলিমেন্ট দ্বারা নির্দিষ্ট করা হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blurEffect">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="red" filter="url(#blurEffect)" />
</svg>

ব্যাখ্যা:

• <filter> ট্যাগের মধ্যে id="blurEffect" ফিল্টার তৈরি করা হয়েছে।
• <feGaussianBlur> এলিমেন্টের মাধ্যমে ব্লার (blur) প্রভাব প্রয়োগ করা হয়েছে।
• stdDeviation="5" এর মাধ্যমে ব্লারের পরিমাণ নির্ধারণ করা হয়েছে।
• filter="url(#blurEffect)" এর মাধ্যমে ফিল্টারটি <circle> উপাদানে প্রয়োগ করা হয়েছে।

2. কমন এসভিজি ফিল্টার প্রকার

এসভিজি ফিল্টারের মাধ্যমে বিভিন্ন ধরনের ভিজ্যুয়াল ইফেক্ট তৈরি করা যায়। এর মধ্যে কিছু সাধারণ ফিল্টার প্রকার:

Gaussian Blur

• ব্লার প্রভাব সৃষ্টি করে যা চিত্রের সীমানা মলিন বা মসৃণ করে।

<feGaussianBlur in="SourceGraphic" stdDeviation="10" />

Drop Shadow

• এই ফিল্টারটি একটি বস্তুর নীচে ছায়া তৈরি করে, যা 3D প্রভাব সৃষ্টি করতে সহায়ক।

<filter id="f1" x="0" y="0" width="150%" height="150%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blurred" />
  <feOffset in="blurred" dx="5" dy="5" result="offsetblur" />
  <feFlood flood-color="black" result="color" />
  <feComposite in2="offsetblur" operator="in" result="shadow" />
  <feComposite in2="SourceAlpha" operator="in" result="final" />
  <feComposite in2="SourceAlpha" operator="over" />
</filter>

Brightness/Contrast

• চিত্রের উজ্জ্বলতা এবং কনট্রাস্ট পরিবর্তন করতে ব্যবহৃত হয়।

<feComponentTransfer>
  <feFuncR type="table" tableValues="0 1" />
  <feFuncG type="table" tableValues="0 1" />
  <feFuncB type="table" tableValues="0 1" />
</feComponentTransfer>

Color Matrix

• চিত্রের রঙ পরিবর্তন বা ম্যানিপুলেশন করার জন্য ব্যবহার করা হয়।

<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />

3. এসভিজি এফেক্টস (SVG Effects)

এসভিজি এফেক্টস দ্বারা আপনি চিত্রের উপর নানা ধরনের ইন্টারঅ্যাকটিভ এফেক্ট বা স্টাইলিং প্রয়োগ করতে পারেন। এসভিজি ফিল্টারগুলোর সাথে CSS বা JavaScript ব্যবহার করে ডায়নামিক এফেক্টস তৈরি করা সম্ভব।

CSS দিয়ে ফিল্টার ব্যবহার:

CSS ফিল্টার ব্যবহার করে এসভিজি উপাদানে বিভিন্ন প্রভাব যেমন ব্লার, গ্রে স্কেল, উজ্জ্বলতা ইত্যাদি প্রয়োগ করা যায়।

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" style="filter: blur(5px);" />
</svg>

এখানে, CSS ফিল্টার blur(5px) প্রয়োগ করা হয়েছে, যা সিলিন্ডারের উপর ব্লার প্রভাব সৃষ্টি করবে।

JavaScript দিয়ে ফিল্টার কন্ট্রোল:

JavaScript ব্যবহার করে আপনি ফিল্টারগুলির মান পরিবর্তন করতে পারেন, যেমন ব্লারের পরিমাণ বা রঙের কনট্রাস্ট পরিবর্তন করা। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন বা অন্য ইভেন্টের মাধ্যমে ডায়নামিক পরিবর্তন করতে সহায়ক।

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" id="mySVG">
  <circle cx="100" cy="100" r="50" fill="green" id="circleElement" />
</svg>

<script>
  document.getElementById("circleElement").setAttribute("style", "filter: blur(10px);");
</script>

এখানে, JavaScript কোডের মাধ্যমে সিলিন্ডারের উপর ব্লার প্রভাব ডায়নামিকভাবে পরিবর্তন করা হয়েছে।

4. ফিল্টার ও এফেক্টস-এর মধ্যে পার্থক্য

• ফিল্টার: এসভিজি ফিল্টারগুলি মূলত স্থির এবং চিত্রের উপাদানের উপর বিশেষ প্রভাব প্রয়োগ করে। এগুলি সাধারণত <filter> ট্যাগের মাধ্যমে ব্যবহৃত হয় এবং এগুলির মাধ্যমে গ্রাফিক্সের গুণগত মান বা দৃশ্যমানতা পরিবর্তিত হয়।
• এফেক্টস: এসভিজি এফেক্টস সাধারণত CSS এবং JavaScript এর মাধ্যমে নিয়ন্ত্রিত হয়, যা ডায়নামিক এবং ইন্টারঅ্যাকটিভ হতে পারে। এগুলি সাধারণত ওয়েব পেজের রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ ডিজাইনের জন্য ব্যবহৃত হয়।

সারাংশ

এসভিজি ফিল্টার এবং এফেক্টস গ্রাফিক্সের উপর বিভিন্ন প্রভাব প্রয়োগ করতে সহায়তা করে, যেমন ব্লার, শ্যাডো, রঙ পরিবর্তন, কনট্রাস্ট পরিবর্তন ইত্যাদি। এই ফিল্টারগুলি চিত্রের গুণগত মান উন্নত করতে ব্যবহৃত হয় এবং ওয়েব ডিজাইন ও ইন্টারঅ্যাকটিভ এফেক্টস তৈরি করতে ব্যবহৃত হয়। CSS এবং JavaScript এর সাহায্যে ফিল্টার এবং এফেক্টস আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ করা যায়।